<template>
  <div ref="mychart" class="base-chart-box">子组件</div>
</template>

<script>
/*
ref 和 $refs
  作用:利用 ref 和 $refs 可以用于 获取 dom 元素或 组件实例
  特点:查找范围 > 当前组件内(更精确稳定)

获取 dom:
    1.目标标签-添加ref 属性
      <div ref="chartRef">我是染图表的容器</div>
    2.恰当时机通过 this.$refs.xxx,获取目标标签
      mounted ()[
        console.log(this.$refs.chartRef)
      }
*/
import * as echarts from 'echarts'

export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    //const myChart = echarts.init(document.querySelector(".base-chart-box"))
    const myChart = echarts.init(this.$refs.mychart)
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例',
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    })
  },
}
</script>

<style scoped>
.base-chart-box {
  width: 400px;
  height: 300px;
  border: 3px solid #000;
  border-radius: 6px;
}
</style>